<template>
  <div class="main clearfix">
    <div class="left">
        <v-stat></v-stat>
    </div>
    <div class="right">
        <component :is="currentView"></component>
    </div>
  </div>
</template>

<script>
import vStat from '@/components/common/stat/stat'
import customer from '@/components/customer/customer'
import {mapState} from 'vuex'
export default {
  name: 'main',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  components:{vStat,customer},
  computed:{
    ...mapState({
      currentView:state=>state.stat.currentView
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main{width:12rem;border:1px solid #ccc;margin:0.4rem auto 0;}
.clearfix:after{content:'';display:block;overflow:hidden;clear:both;}
.left{width:15%;height:100%;float:left;}
.right{width:85%;height:100%;float:left;border-left:1px solid #ccc;}
</style>
